<template>
	<view class="userLayout pageBg">
		<view class="userInfo">
			<view class="avatar">
				<image class="pic" src="../../static/worker.png" mode="aspectFill"></image>
			</view>
			<view class="nickname">职场冲冲</view>
			<view class="address">打工人的维权好帮手</view>
		</view>

		<view class="section">
			<view class="list">
				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" size="20"></uni-icons>
						<view class="text">反映问题</view>
					</view>
					<view class="right">
						<view class="text">对话</view>
						<uni-icons type="chat" size="15"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact"></button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button open-type="contact" @click="call"></button>
					<!-- #endif -->
				</view>
				<view class="row" @click="createDoc">
					<view class="left">
						<uni-icons type="wallet-filled" size="20"></uni-icons>
						<view class="text">生成仲裁申请书</view>
					</view>
					<view class="right">
						<view class="text">开始</view>
						<uni-icons type="gear-filled" size="15"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="row" @click="downloadAndPrepareShare('https://zc.miyucaicai.cn/szzcsqs.doc','深圳仲裁申请书范例')">
					<view class="left">
						<view class="text">仲裁申请书范文</view>
					</view>
					<view class="right">
						<!-- <view class="text">{{ shareButtonText['深圳仲裁申请书范例'] || '下载并分享' }}</view> -->
						 <view class="text" :style="shareButtonText['深圳仲裁申请书范例'].style">{{ shareButtonText['深圳仲裁申请书范例'].text }}</view>
						<uni-icons type="download" size="15"></uni-icons>
					</view>
				</view>
			</view>
			<view class="row" @click="downloadAndPrepareShare('https://zc.miyucaicai.cn/szzcsqs.doc','证据清单范例')">
				<view class="left">
					<view class="text">证据清单示例</view>
				</view>
				<view class="right">
					<!-- <view class="text">{{ shareButtonText['证据清单范例'] || '下载并分享' }}</view> -->
					<view class="text" :style="shareButtonText['证据清单范例'].style">{{ shareButtonText['证据清单范例'].text }}</view>
					<uni-icons type="download" size="15"></uni-icons>
				</view>
			</view>
			<view class="row" @click="downloadAndPrepareShare('https://zc.miyucaicai.cn/dlc.doc','代理词参考')">
				<view class="left">
					<view class="text">代理词参考</view>
				</view>
				<view class="right">
					<!-- <view class="text">{{ shareButtonText['代理词参考'] || '下载并分享' }}</view> -->
					<view class="text" :style="shareButtonText['代理词参考'].style">{{ shareButtonText['代理词参考'].text }}</view>
					<uni-icons type="download" size="15"></uni-icons>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// const shareButtonText = ref({});
	const fileSavedPaths = ref({});

	const shareButtonText = ref({
		'深圳仲裁申请书范例': {
			text: '下载并分享',
			style: 'color: #000000;' // 默认颜色
		},
		'证据清单范例': {
			text: '下载并分享',
			style: 'color: #000000;'
		},
		'代理词参考': {
			text: '下载并分享',
			style: 'color: #000000;'
		}
	});

	const call = () => {
		uni.makePhoneCall({
			phoneNumber: "10086"
		})
	}

	const createDoc = () => {
		uni.showToast({
			title: '开发中..可以下载范例后改写',
			icon: 'none',
			duration: 2000
		});
	}


	const handleFileDownload = (url, name, onSuccess, onError) => {
		uni.downloadFile({
			url: url,
			success: function(res) {
				if (res.statusCode === 200) {
					const tempFilePath = res.tempFilePath;
					const savePath = `${wx.env.USER_DATA_PATH}/${name}.doc`;
					saveFile(tempFilePath, savePath, name, onSuccess, onError);
				} else {
					onError(`下载文件失败，状态码: ${res.statusCode}`);
				}
			},
			fail: function(err) {
				onError(`文件下载失败: ${err}`);
			}
		});
	};

	const saveFile = (tempFilePath, savePath, name, onSuccess, onError) => {
		const fileManager = uni.getFileSystemManager();
		fileManager.saveFile({
			tempFilePath: tempFilePath,
			filePath: savePath,
			success: function(result) {
				fileSavedPaths.value[name] = result.savedFilePath;
				onSuccess();
			},
			fail: function(err) {
				onError(`文件保存失败: ${err}`);
			}
		});
	};

	const shareFile = (filePath) => {
		uni.shareFileMessage({
			filePath: filePath,
			success: function(openRes) {
				console.log('分享成功:', openRes);
			},
			fail: function(err) {
				console.error('分享失败:', err);
			}
		});
	};

	const handleError = (name, errorMsg) => {
		const detailedErrorMessage = JSON.stringify(errorMsg, null, 2); // 使用缩进美化输出
		uni.showToast({
			title: detailedErrorMessage,
			icon: 'none',
			duration: 2000
		});
		console.error(errorMsg);
		shareButtonText.value[name].text = '下载失败，请重试';
	};

	const downloadAndPrepareShare = (url, name) => {
		if (process.env.UNI_PLATFORM === "h5") {
			downloadForH5(url);
		} else {
			if (!fileSavedPaths.value[name]) {
				shareButtonText.value[name] = '下载中...';
				handleFileDownload(url, name, () => {
					shareButtonText.value[name] = {
					    text: '点击分享',
					    style: 'color: #66CC66;' // 改变颜色为示例中的橙色
					  };
					// shareButtonText.value[name] = '点击分享';
				}, (errorMsg) => {
					handleError(name, errorMsg);
				});
			} else {
				shareFile(fileSavedPaths.value[name]);
			}
		}
	};

	const downloadForH5 = (url) => {
		const link = document.createElement("a");
		link.href = url;
		link.download = url.substring(url.lastIndexOf("/") + 1);
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	};
</script>
<style lang="scss" scoped>
	.userLayout {
		.userInfo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 66rpx 0;

			.pic {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.nickname {
				font-size: 44rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.address {
				font-size: 22rpx;
				color: #aaa;
			}
		}

		.section {
			width: 690rpx;
			margin: 50rpx auto;
			border: 1px solid #eee;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);

			.row {
				padding: 5rpx 30rpx;
				height: 100rpx;
				border-bottom: #eee 1rpx solid;

				position: relative; //不设置，子元素的absolute以父元素为基准
				background: #fff;

				button {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					opacity: 0;
				}

				&:last-child {
					border-bottom: none;
				}

				display: flex;
				justify-content: space-between;
				align-items: center;

				.left,
				.right {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.left {
					:deep() {
						.uni-icons {
							color: $brand-theme-color !important;
						}
					}

					.text {
						padding-left: 20rpx;
						color: #4d4d4d;
					}
				}

				.right {
					:deep() {
						.uni-icons {
							color: #aaa !important;
						}
					}

					.text {
						font-size: 28rpx;
						color: #7f7f7f;
					}
				}
			}
		}


	}
</style>